{% extends "base.html" %}

{% block title %}登录 - DRF 学习项目{% endblock %}

{% block content %}
<div class="auth-container">
    <div class="text-center mb-4">
        <h2 class="h4 mb-3">🔐 用户登录</h2>
        <p class="text-muted">请登录以访问 DRF 学习项目</p>
    </div>

    {% if form.errors %}
        <div class="alert alert-danger">
            <strong>登录失败：</strong>
            {% for field, errors in form.errors.items %}
                {% for error in errors %}
                    <div>{{ error }}</div>
                {% endfor %}
            {% endfor %}
        </div>
    {% endif %}

    <form method="post">
        {% csrf_token %}

        <div class="mb-3">
            <label for="{{ form.username.id_for_label }}" class="form-label">用户名</label>
            <input type="text" class="form-control" id="{{ form.username.id_for_label }}"
                   name="{{ form.username.name }}" value="{{ form.username.value|default:'' }}"
                   placeholder="请输入用户名" required>
        </div>

        <div class="mb-3">
            <label for="{{ form.password.id_for_label }}" class="form-label">密码</label>
            <input type="password" class="form-control" id="{{ form.password.id_for_label }}"
                   name="{{ form.password.name }}" placeholder="请输入密码" required>
        </div>

        <div class="mb-3 form-check">
            <input type="checkbox" class="form-check-input" id="remember_me" name="remember_me">
            <label class="form-check-label" for="remember_me">记住我</label>
        </div>

        <div class="d-grid">
            <button type="submit" class="btn btn-primary btn-lg">登录</button>
        </div>

        <input type="hidden" name="next" value="{{ next }}">
    </form>

    <div class="text-center mt-4">
        <div class="row">
            <div class="col-6">
                <a href="{% url 'password_reset' %}" class="text-decoration-none">忘记密码？</a>
            </div>
            <div class="col-6">
                <a href="/admin/" class="text-decoration-none">管理员登录</a>
            </div>
        </div>
    </div>

    <!-- 测试账户信息 -->
    <div class="mt-4 p-3 bg-light rounded">
        <h6 class="text-muted mb-2">🧪 测试账户</h6>
        <small class="text-muted">
            <div><strong>管理员:</strong> admin / admin123</div>
            <div><strong>普通用户:</strong> testuser / test123</div>
        </small>
    </div>

    <!-- API 访问说明 -->
    <div class="mt-3 p-3 bg-info bg-opacity-10 rounded">
        <h6 class="text-info mb-2">📚 API 访问说明</h6>
        <small class="text-muted">
            <div>• <a href="/api/" target="_blank">API 根目录</a> - 浏览所有可用的 API</div>
            <div>• <a href="/docs/" target="_blank">API 文档</a> - 查看详细的 API 文档</div>
            <div>• <a href="/api-auth/login/" target="_blank">API 认证</a> - DRF 认证页面</div>
        </small>
    </div>
</div>
{% endblock %}
